{include file="public/_header" /}
<style>
    #mainForm {
        max-width: 1000px;
        margin: 30px auto;
    }

    #mainForm .layui-form-item {
        margin-bottom: 25px;
    }
</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">编辑</div>
        <div class="layui-card-body">
            <form class="layui-form" id="mainForm">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">标题:</label>
                    <div class="layui-input-block">
                        <input name="title" id="title" required placeholder="请输入" class="layui-input"
                               lay-verType="tips" value="{$data['title']}"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">类型</label>
                    <div class="layui-input-block">
                        <select name="type" id="type" class="layui-select" lay-filter="type">
                            <option value="1" {eq name="data['type']" value="1" } selected {/eq}>图片</option>
                            <option value="2" {eq name="data['type']" value="2" } selected {/eq}>视频</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item" id="uploadImage">
                    <label class="layui-form-label layui-form-required">上传封面</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="uploadCoverImg">上传图片</button>
                        <input type="hidden" name="img_src" id="img_src" value="{$data['file_src']}">
                    </div>
                    <div class="layui-input-block">
                        <div class="layui-upload-list" id="coverImg">
                            <img src="{$data['file_src']}" width="100px" height="100px" class="layui-upload-img">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item" id="uploadVideo" style="display: none">
                    <label class="layui-form-label layui-form-required">上传视频</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="upload_video">上传视频</button>
                        <input type="hidden" name="videoSrc" id="videoSrc" value="{$data['file_src']}">
                    </div>
                    <div class="layui-input-block">
                        <div class="layui-upload-list" id="video_src">
                            <video src="'+ res.src +'" controls="true" width="300px" height="200px" autoplay="false"></video>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">排序:</label>
                    <div class="layui-input-block">
                        <input name="sort" id="sort" type="number" placeholder="请输入" class="layui-input"
                               lay-verType="tips"/>
                    </div>
                </div>

                <div class="form-group-bottom text-center">
                    <button type="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
                    <button class="layui-btn" lay-filter="add" lay-submit>&emsp;提交&emsp;</button>
                </div>
                <input type="hidden" name="id" value="{$data['id']}">
            </form>
        </div>
    </div>
</div>
{include file="public/_footer"}
<script>
    var $,admin;
    var index= 0;
    var indexData = {
        0 : 0
    };
    layui.use(['form', 'element','admin','upload'], function () {
        var form = layui.form;
        $ = layui.jquery;
        admin = layui.admin;
        var upload = layui.upload;

        var type = $('#type').val();
        if (type == 1) {
            // 上传图片
            $('#uploadVideo').hide();
            $('#uploadImage').show();
            var html = '<img src="{$data[\'file_src\']}" width="100px" height="100px" class="layui-upload-img">';
            $('#coverImg').html(html);
            $('#img_src').val('{$data[\'file_src\']}');
        }else {
            // 上传视频
            $('#uploadVideo').show();
            $('#uploadImage').hide();
            var html = '<video src="{$data[\'file_src\']}" controls="true" width="300px" height="200px" autoplay="false"></video>';
            $('#video_src').html(html);
            $('#videoSrc').val('{$data[\'file_src\']}');
        }


        form.on ('select(type)', function (ele) {
            var type = ele.value;
            if (type == 1) {
                // 上传图片
                $('#uploadVideo').hide();
                $('#uploadImage').show();
            }else {
                // 上传视频
                $('#uploadVideo').show();
                $('#uploadImage').hide();
            }
        });


        upload.render({
            elem: '#uploadCoverImg'
            , url: '/admin/upload/upload'
            , multiple: false
            ,accept : 'images'
            , before: function (obj) {
            }
            , done: function (res) {
                //上传完毕
                if (res.code === 0) {
                    var html = '<img src="' + res.src + '" width="100px" height="100px" class="layui-upload-img">';
                    $('#coverImg').html(html);
                    $('#img_src').val(res.src);
                }
            }
        });

        upload.render({
            elem: '#upload_video'
            , url: '/admin/upload/upload'
            , multiple: false
            ,accept : 'video'
            ,exts : 'mp4'
            , before: function (obj) {
            }
            , done: function (res) {
                //上传完毕
                if (res.code === 0) {
                    var html = '<video src="'+ res.src +'" controls="true" width="300px" height="200px" autoplay="false"></video>';
                    $('#video_src').html(html);
                    $('#videoSrc').val(res.src);
                }
            }
        });


        // 提交
        form.on('submit(add)', function (data) {
            var arr = data.field;
            // 提交数据
            $.post('{:url("edit")}', arr, function (res) {
                if (res.code === 0) {
                    layer.msg(res.msg);
                    setTimeout(function () {
                        window.location.href = "{:url('index')}";//'index.html';
                    }, 500);
                } else {
                    layer.msg(res.msg);
                }
            }, 'JSON');
            return false;
        });
    });
</script>